<template>
	<view class="contont">
		<!-- 顶部搜索 -->
		<view :style="{paddingTop:statuHeight+'px'}" class="search-inots">
			<view class="img-input">
				<view class="logo-search-img">
					<image mode="scaleToFill" class="imgs" src="@/static/home/logo.jpg"></image>
				</view>
				<view style="position: relative;" @click="searchClick">
					<input class="uni-input"
					placeholder-style="color: red;font-size: 12px;padding-left:85rpx" >
					</input>
					<view class="input-icons" >
						<uni-icons type="search" size="20" color='#E9E9E9'></uni-icons>
						<text class="text">{{ i18n.inputPlace }}</text>
					</view>
				</view>
			</view>
			<view class="icons-icon">
				<view class="iconfont icons" style="color: #fff;">&#xe608;</view>
				<view class="iconfont icons" style="color: #fff;margin:0 47rpx 0 37rpx">&#xe611;</view>
			</view>
		</view>
		<!-- 顶部选项卡 -->
		<view class="tabs-box">
			<ms-tabs :list="topTabbarList" v-model="active" itemColor='#FFFFFF' lineColor='#FFFFFF' @input="tabInput"/>
		</view>
		<scroll-view scroll-y="true" refresher-enabled="true" class="sv" :refresher-triggered="triggered" :refresher-threshold="100"
				@refresherrefresh="onRefresh" @refresherabort="onAbort" :style="{height:navHeight+'px'}">
			<view class="information">
				<view class="iconfont icons" style="color: #EC3746;margin:0 24rpx 0 22rpx;">&#xe628;</view>
				<view class="text">{{message}}</view>
			</view>
			<!-- 轮播图 -->
			<view class="main">
				<view class="banner">
					<view class="banner-box">
						<swiper autoplay :circular="true" style="border-radius: 8px;overflow: hidden;" duration="400">
							<swiper-item v-for="(item,index) in swipers" :key="index">
								<image :src="item.imgUrl" class="bannerImg" mode="scaleToFill" style="border-radius: 8px;overflow: hidden;"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<!-- 明星专区 -->
				<view class="star-box">
					<view class="star-text">
						<view class="star-hot">
							<view class="img-box">
								<image class="hot-img" mode="scaleToFill" src="@/static/home/hot.png"></image>
							</view>
							<view class="star-Special-area">{{ i18n.starprefecture }}</view>
						</view>
						<view class="query-more" @click="celebClick">{{ i18n.SeeMore }}</view>
					</view>
					<!-- 热推明星 -->
					<view class="hotpush-star">
						<view v-for="(item,index) in starList" :key="item.id" class="hotpush-box" @click="celebrityClick">
							<view class="Hotpush-img-box">
								<image class="hotpush-image" mode="aspectFill" src="@/static/home/celebrity.jpeg" v-if="!item.furl"></image>
								<image class="hotpush-image" mode="aspectFill" :src="item.furl" v-else></image>
							</view>
							<text class="Hotpush-text">{{item.nick}}</text>
						</view>
					</view>
				</view>
				<!--猜你喜欢-->
				<view class="two-guess-like-box">
					<view class="guess-like">
						<view class="star-text">
							<view class="star-hot">
								<view class="img-box">
									<image class="hot-img" mode="scaleToFill" src="@/static/home/acoustic.png"></image>
								</view>
								<view class="star-Special-area">{{ i18n.youLike }}</view>
							</view>
							<view class="query-more" @click="queryMore(videoFormL.channelId)">{{ i18n.SeeMore }}</view>
						</view>
					</view>
					<!-- 视频 -->
					<view class="video-sort">
						<view v-for="(item,index) in likeVideo" :key="index" class="video-large-parent">
							<view class="video-box" @click="videoDetail(item.first.furl,item.first.vid)">
								<view class="video-parent">
									<image :src="item.first.fcoverUrl" mode="aspectFill"></image>
								</view>
							</view>
							<view class="small-video" >
								<view v-for="(k,i) in item.homeList" :key="k.vid" class="video-alone"  @click="videoDetail(k.furl,k.vid)">
									<view class="main-video">
										<image :src="k.fcoverUrl" mode="aspectFill"></image>
										<view class="vip-logo" v-if="k.auditTime== '1周前'">NEW</view>
									</view>
									<view class="newest"><text class="newest-ident" v-if="k.auditTime== '1周前'">[最新] </text>{{k.vcoverTitle}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部导航 -->
		<tabber :tabIndex='0'></tabber>
	</view>
</template>

<script>
	import tabber from '../../components/tabbar.vue'
	import msTabs from '../../components/ms-tabs.vue'
	import { $POST, $GET } from '../../network/api.js'
	import { dateDiff } from '@/network/date.js'
	export default {
		components:{tabber,msTabs},
		computed: {  
		  i18n () {  
		    return this.$t('home')  
		  }  
		 },
		data() {
			return {
				message:'Prompt XX user to recharge', // 跑马灯内容
				timer:'',
				celebrityForm: { // 明星排行参数
					pageNum: 1,
					pageSize: 10,
					userId: ''
				},
				userData: uni.getStorageSync('user_key'), // 个人数据
				slideshow: { // 轮播图参数
					advType: 1, // 广告类型：轮播=1，vip=2，搜索=3
					channelId: 1, // 大类频道ID
					fType: 1 // 文件类型 视频：1，图片：2
				},
				videoFormL: { // 视频列表参数
					channelId: 1,
					isVip: 0,
					pageNum: 1,
					pageSize: 10
				},
				triggered: false, // 下拉刷新开关
				navHeight: 0, // 下拉主体高度
				windowHeight: 0, // 可视高度
				playStatus:true,
				videoplay:'', // 手动播放
				active: 0, // 默认顶部选项卡0
				statuHeight: uni.getSystemInfoSync().statusBarHeight, // 状态栏高度
				likeVideo: [ // 视频列表数据
					{
						first:{
							vid:1,
							fcoverUrl:'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
							furl:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
						},
						homeList:[
							{	
								vcoverTitle: '天龙八部',
								vid:2,
								fcoverUrl:'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
								furl:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
							},
							{
								vcoverTitle:'射雕',
								vid:3,
								fcoverUrl:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
								furl:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
							},
						]
					}
					
				], 
				starList: [
					{ furl: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', nick: "张三" },
					{ furl: '../../static/home/celebrity.jpeg', nick: "李四" },
					{ furl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', nick: "王五" },
					{ furl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', nick: "王麻子" },
					{ furl: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', nick: "二狗子" },
				], // 明星排行数据
				swipers:[ // 轮播图数据
					{ imgUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', id: 1 },
					{ imgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', id: 2 },
					{ imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', id: 3 },
					{ imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', id: 4 },
					{ imgUrl: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', id: 5 },
					{ imgUrl: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', id: 6 },
					{ imgUrl: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', id: 7 },
					{ imgUrl: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', id: 8 }
				], 
				topTabbarList:[
					{title:"推荐", value:1},{title:"热门频道", value:2},{title:"今日火爆", value:3},
					{title:"卡通频道", value:4}
				] // 顶部选项卡数据
			}
		},
		onReady(){
			this.getHight() // 获取高度
		},
		mounted() {
			
		},
		onLoad() {
			this.celebrityForm.userId = this.userData.id // 登录人id赋值
			// this.getBanner() // 调用轮播图方法
			// this.celebrity() // 调用明星排行方法
			// this.getTopTabbar() // 调用头部选项卡方法
			// this.getVideo() // 获取视频列表
			this.marquee()
		},
		onShow() {
			// 隐藏官方tabber
			uni.hideTabBar()
		},
		mounted() {
			this.videoplay = wx.createVideoContext('myVideo')
		},
		methods: {
			// 跑马灯
			 marquee(){
				this.timer = setInterval(() => {
						//获取到头的第一个字符
						let start = this.message.substring(0,1);
						//获取到后面的所有字符
						let end = this.message.substring(1);
						//重新拼接得到新的字符串，并赋值给this.message
						this.message = end + start;
				},300)
				},
			// 获取设备高度
			getHight() {
				const vm = this;
				uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
					success(res) { //成功回调函数
						vm.windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
						let titleH = uni.createSelectorQuery().select(".sv")
						titleH.boundingClientRect(data=>{
							vm.navHeight = vm.windowHeight - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
						}).exec()
					}
				})
			},
			// 关闭下拉刷新
			onAbort() {
				const vm = this
				setTimeout(() => {
					vm.triggered = false;
				}, 100)
			},
			// 下拉刷新
			onRefresh() {
				const vm = this
				vm.triggered = true	
				vm.getVideo() 		
			 },
			// 选项卡input事件
			tabInput(value,item) {
				this.videoFormL.channelId = item.value // 赋值id到视频列表
				this.slideshow.channelId = item.value // 赋值id到轮播图
				// this.getVideo() // 视频列表方法
				// this.getBanner() // 轮播图方法
			},
			// 获取视频列表
			async getVideo() {
				const res = await $POST('/boke-item/file/getVideoFile',this.videoFormL)
				const list1 = JSON.parse(JSON.stringify(res.data.slice(0,3))) 
				this.onAbort()
				if(list1.length) {
					let videoObj = {
						first: {},
						homeList: []
					}
					list1.forEach((item,index) => {
						if(index == 0){
							videoObj.first = item
						} else{
							videoObj.homeList.push(item)
							item.auditTime = dateDiff(item.auditTime) // 转换时间
						}
					})
					this.likeVideo = []
					this.likeVideo.push(videoObj)
				}else{
					this.likeVideo = []
				}
			},
			// 获取头部选项卡
			async	getTopTabbar() {
				const res = await $GET('/boke-item/channel/getChannel')
				this.topTabbarList = res.data.map(item => ({title: item.vcName, value: item.vcId}))
			},
			// 获取明星排行
			celebrity() {
				$POST( '/boke-item/channel/getStarZoneRank',this.celebrityForm).then(res => {
					this.starList = res.data
				})
			},
			// 获取轮播图
			getBanner() {
				$POST('/boke-item/file/getCarouselAdv',this.slideshow).then(res => {
					this.swipers = res.data
				})
			},
			// 跳转个人作品
			celebrityClick() {
				uni.navigateTo({
					url: '/pages/my/product'
				})
			},
			// 跳视频详情
			 videoDetail(url,id) {
				uni.navigateTo({
					url: '/pages/home/video_details?videoUrl='+url+'&vid='+id
				})
			 },
			// 查看更多明星
			celebClick() {
				uni.navigateTo({
					url: '/pages/home/celebrity'
				})
			},
			// 查看更多视频
			queryMore(id) {
				uni.navigateTo({
					url: '/pages/home/more_video?channelId='+id
				})
			},
			// 跳转搜索页
			searchClick() {
				uni.navigateTo({
				  url: '/pages/home/search'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.contont{
		background-color: #F1F1F1;
		.search-inots{
			background: #5B2177;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.img-input{
				display: flex;
				align-items: center;
				
				.logo-search-img{
					width: 56rpx;
					height: 56rpx;
					margin: 5rpx 38rpx 11rpx 38rpx;
					.imgs{
						width: 100%;
						height: 100%;
					}
				}
				.uni-input{
					width: 393rpx;
					height: 58rpx;
					background:#FFFFFF;
					opacity: 0.12;
					border-radius: 29rpx;
					
				}
				.input-icons{
					display: flex;
					position: absolute;
					top:0;
					left: 35rpx;
					line-height: 58rpx;
					color: #fff;
					.text{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #E9E9E9;
						opacity: 0.72;
						margin-left: 14rpx;
					}
				}
			}
			.icons-icon{
				display: flex;
				align-items: center;
				.iconfont{
					font-size: 48rpx;
				}
			}
		}
		.tabs-box{
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			background: #5B2177;
			height: 120rpx;
			/deep/ .tab__item:nth-of-type(1) {
				margin-right: 26rpx !important;
				padding-left: 9rpx !important;
			}
			/deep/ .tab__item {
				color: #F4F4F4 !important;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 97rpx !important;
			}
			/deep/ .tab{
				height: 97rpx !important;
			}
			/deep/ .tabBlock .tab__line {
				height: 6rpx !important;
				border-radius: 3rpx !important;
			}
			
			/deep/ .tab__item--active{
				font-size: 36rpx;
				font-weight: 600;
				font-family: PingFang SC;
				color: #FFFFFF !important;
			}
		}
		.information{
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			padding-top: 14rpx;
			.text{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.main{
			// margin-bottom: 85px;
			// bannet图
			.banner{
				background: #fff;
				.banner-box{
					height: 276rpx;
					padding:24rpx;
					overflow: hidden;
					swiper {
						width: 100%;
						height: 100%;
						display: block;
				
						.bannerImg {
							display: block;
							max-width: 100%;
							width: 96%;
							height: 100%;
							border-radius: 5px;
							margin-left:10px;
						}
					}
				}
			}
			// 明星专区
			.star-box{
				background-color: #FFFFFF;
				padding: 0 29rpx;
				margin-bottom: 10rpx;
				.star-text{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.star-hot{
						display: flex;
						align-items: center;
						.img-box{
							width: 15px;
							height: 20px;
							.hot-img{
								width: 100%;
								height: 100%;
							}
						}
						.star-Special-area{
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #333333;
							margin-left: 8rpx;
						}
					}
					.query-more{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
				// 热推明星
				.hotpush-star::-webkit-scrollbar {
				  display: none;
				}
				.hotpush-star{
					display: flex;
					overflow-x: auto;
				  display: -webkit-box;
				  -webkit-overflow-scrolling: touch;
					padding: 27rpx 0 47rpx 0;
					.hotpush-box{
						width: 100rpx;
						margin-right: 25rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						.Hotpush-img-box{
							width: 100rpx;
							height: 100rpx;
							// background: #000000;
							// opacity: 0.3;
							border-radius: 50%;
							.hotpush-image{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.Hotpush-text{
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
							margin-top:11rpx;
						}
					}
				}
			}
			//  列表二	猜你喜欢
			.two-guess-like-box{
				background-color: #FFFFFF;
				padding: 0 29rpx 49rpx 29rpx;
				margin-bottom: 10rpx;
				.guess-like{
					padding: 28rpx 0;
					.star-text{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.star-hot{
							display: flex;
							align-items: center;
							.img-box{
								width: 34rpx;
								height: 34rpx;
								.hot-img{
									width: 100%;
									height: 100%;
									object-fit: fill;
								}
							}
							.star-Special-area{
								font-size: 32rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
								margin-left: 8rpx;
							}
						}
						.query-more{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}
				}
				// 视频
				.video-sort{
					.video-large-parent{
						.video-box{
							margin-bottom: 20rpx;
							.video-parent{
								width: 705rpx;
								height: 348rpx;
								border-radius: 10rpx;
								position: relative;
								image{
									width: 100%;
									height: 100%;
									border-radius: 10rpx;
								}
								.vip-logo{
									position: absolute;
									left: 18rpx;
									top: 35rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #DCDCDC;
								}
							}
							.newest{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
								margin-top:16rpx;
								// text-align: center;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
								.newest-ident{
									color: #EE4242;
								}
							}
						}
					}
					.small-video{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.video-alone:nth-child(2n) {
							margin-right:0 !important;
						}
						.video-alone{
							margin-right: 23rpx;
							.main-video{
								width: 340rpx;
								height: 192rpx;
								border-radius: 10rpx;
								position: relative;
								z-index: 9 !important;
								image{
									width: 100%;
									height: 100%;
									border-radius: 10rpx;
								}
								.vip-logo{
									position: absolute;
									left: 0;
									top: 0;
									width: 80rpx;
									height: 30rpx;
									background: rgba(#EE4242,.6);
									border-radius: 10rpx 0rpx 10rpx 0;
									text-align: center;
									line-height: 30rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
								}
							}
							.newest{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
								margin-top:16rpx;
								// text-align: center;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
								.newest-ident{
									color: #EE4242;
								}
							}
						}
					}
				}
			}
		}
	}






</style>
